<template>
  <div :class="classes || ''" class="bg-white-6 column no-wrap shadow-1 border-8 q-pa-md">
    <div class="row items-center q-gutter-md">
      <div class="text-subtitle1 text-bold">{{ $t('AGVCore.AGVUseRatio') }}</div>
      <q-space></q-space>
      <q-btn v-for="tab in tabs" :key="tab.value" :class="currentTab === tab.value ? 'bg-indigo-14' : 'bg-grey-1'"
             :color="currentTab === tab.value ? 'indigo-14' : 'grey-4'" no-caps outline unelevated
             @click="handleToggle(tab)">
        <div :class="currentTab === tab.value ? 'text-grey-1' : 'text-grey-8'" class="row items-center no-wrap">
          <q-icon :name="tab.icon" class="q-mr-xs text-deep-purple-5" size="1.25rem"></q-icon>
          <span class="text-bold text-uppercase">{{ tab.label }}</span>
        </div>
        <q-tooltip anchor="bottom right" self="top right" v-bind="$tooltipAttr" v-bind:offset="[0, 5]">
          <div>{{ `${tab.label}` }}</div>
          <div class="q-pt-md">{{ `${tab.tips}` }}</div>
        </q-tooltip>
      </q-btn>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <q-charts :charts="charts" :colors="colors" :columns="columns" :formatTooltip="formatTooltip"
              :hideTooltips="['EfficiencyAlias']" :labelMap="labelMap" :legend="{ show: false }" :rows="formatRows"
              :ySite="['%']" classes="col no-shadow no-padding" format @click="handleClick"></q-charts>
    <q-modal v-model="modalVisible" :header="header" :menuBtn="false" :persistent="false" nonScrollArea width="800">
      <qx-table :data="tableData" :option="tableOption"></qx-table>
    </q-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { date } from 'quasar'
import { postAPI } from 'src/api'
import { i18n } from 'boot/i18n'

defineProps({ classes: String })

const rows = ref([])
const header = ref('')
const charts = ['line', 'bar']
const tableData = ref([])
const modalVisible = ref(false)
const colors = ['#333FFF', '#333FFF', '#F3F3FB']
const currentTab = ref('sumRateEfficiency')
const columns = ['date', 'Efficiency', 'EfficiencyAlias']
const labelMap = computed(() => {
  const Efficiency = tabs.value.find(el => el.value === currentTab.value)?.label
  return { Efficiency }
})
const formatRows = computed(() => {
  return rows.value.map(el => {
    return {
      date: date.formatDate(el.date, 'MM-DD'), Efficiency: el[currentTab.value] || 0,
      EfficiencyAlias: el[currentTab.value] || 0, rows: el.agvEfficiencyVOs || []
    }
  })
})
const tabs = computed(() => {
  return [{
    label: `${i18n.t('AGVCore.UtilizationRate')}`, value: 'sumRateEfficiency', icon: 'bar_chart',
    tips: `${i18n.t('AGVCore.UtilizationRateTips')}`
  }, {
    label: `${i18n.t('AGVCore.InvalidWorkEfficiency')}`, value: 'invalidEfficiency', icon: 'mdi-chart-bubble',
    tips: `${i18n.t('AGVCore.InvalidWorkEfficiencyTips')}`
  }, {
    label: `${i18n.t('AGVCore.AGVEfficiency')}`, value: 'sumWorkEfficiency',
    icon: 'mdi-chart-donut-variant', tips: `${i18n.t('AGVCore.AGVEfficiencyTips')}`
  }]
})
const tableOption = computed(() => {
  return {
    maxHeight: 'inherit',
    column: [{
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.UtilizationRate')}`, field: 'agvRateEfficiency', format: val => val ? val + '%' : '0%',
      hide: currentTab.value !== 'sumRateEfficiency', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.InvalidWorkEfficiency')}`, field: 'invalidEfficiency',
      format: val => val ? val + '%' : '0%', hide: currentTab.value !== 'invalidEfficiency', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AGVEfficiency')}`, field: 'agvWorkEfficiency',
      format: val => val ? val + '%' : '0%', hide: currentTab.value !== 'sumWorkEfficiency', minWidth: 60
    }]
  }
})

const initData = () => {
  postAPI('/yfagv/api/agvStatisticsDetails/agvEfficiencyAll', { nonLoadingBar: true }, data => {
    rows.value = data
  }, () => rows.value = [])
}
const handleClick = ({ data = {} }) => {
  tableData.value = data.rows
  header.value = `${labelMap.value.Efficiency} ${data.date}`
  modalVisible.value = true
}
const handleToggle = tab => currentTab.value = tab.value
const formatTooltip = (list, field) => field === 'Efficiency' ? list[field] + '%' : list[field]

onMounted(initData)
</script>